<template>
  <div class="component-shop-withdraw-cash-set-up">
    <el-dialog
      v-model="dialogFormVisible"
      title="提现设置"
    >
      <el-form
        ref="dataFormRef"
        :inline="true"
        class="demo-form-inline"
        :model="dataForm"
        @submit.prevent
      >
        <el-form-item label="单笔提现">
          <div>
            不低于
            <el-input-number
              v-model.trim="dataForm.withdrawCashLeast"
              :max="999999"
              :precision="2"
            />
            元，不高于
            <el-input-number
              v-model.trim="dataForm.withdrawCashMax"
              @blur="
                handleMaxValue(
                  dataForm.withdrawCashMax,
                  999999
                )"
            />
            元
          </div>
        </el-form-item>
        <el-form-item label="提现频次">
          <el-select v-model="dataForm.frequency">
            <el-option
              label="每周"
              :value="1"
            />
            <el-option
              label="每月"
              :value="2"
            />
            <el-option
              label="每年"
              :value="3"
            />
          </el-select>
          <el-input-number
            v-model.trim="dataForm.number"
            :min="1"
            :max="20"
            style="width: 140px;margin-left: 10px"
            @blur="handleEdit(dataForm.number)"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span
          class="dialog-footer"
        >
          <div
            class="default-btn"
            @click="dialogFormVisible = false"
          >取消</div>
          <div
            class="default-btn primary-btn"
            @click="dataFormSubmit()"
          >确认</div>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { reactive } from 'vue'

const Data = reactive({
  dialogFormVisible: false,
  dataForm: {
    withdrawCashLeast: '',
    withdrawCashMax: '',
    frequency: '',
    number: ''
  }
})
const { dialogFormVisible, dataForm } = toRefs(Data)

const dataFormRef = ref()
const open = () => {
  Data.dialogFormVisible = true
  nextTick(() => {
    dataFormRef.value.resetFields()
    http({
      url: http.adornUrl('/shop/shopWithdrawCash/getWithdrawCash'),
      method: 'get',
      params: http.adornParams()
    }).then(({ data }) => {
      Data.dataForm = data
    })
  })
}

// 表单提交
const dataFormSubmit = () => {
  dataFormRef.value.validate((valid) => {
    if (valid) {
      http({
        url: http.adornUrl('/shop/shopWithdrawCash/save'),
        method: 'post',
        data: http.adornData(Data.dataForm)
      }).then(() => {
        ElMessage({
          message: $t('shopWithdrawCash.success'),
          type: 'success',
          duration: 1500,
          onClose: () => {
            Data.dialogFormVisible = false
          }
        })
      })
    }
  })
}

const handleMaxValue = (data, max) => {
  const patrn = /^(-)?\d+(\.\d+)?$/
  if (!data.match(patrn)) {
    Data.dataForm.withdrawCashMax = ''
    return
  }
  if (data !== undefined && data !== null) {
    // 表格
    if (data > max) {
      Data.dataForm.withdrawCashMax = max
    }
  }
}

const handleEdit = (e) => {
  Data.dataForm.number = parseInt(e)
}

defineExpose({
  open
})
</script>

<style lang="scss" scoped>

</style>
